<template>
    <view>
        <view class="list">
            <view class="item" v-for="(item,index) in cardDatas" :key="index" @click="getDetail(item)">
                <image class="icon" v-if="item.image" :src="item.image+'?x-oss-process=image/resize,w_600,m_lfit'">
                </image>
                <image class="icon" v-else src="http://ktp.tye3.com/themes/ktp_v1/public/assets/images/temp/pic3.jpg">
                </image>
                <view class="title u-line-2">{{item.title}}
                    <u-tag class="u-m-l-20" :text="item.tag" type="warning" size="mini" v-if="item.tag" />
                </view>
                <view class="sub_title" v-if="item.sub_title">{{item.sub_title}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    /**
     * 栏目 - 纵向 - 上图
     * @description 此组件一般用于展示数据列表。
     * @tutorial https://www.dfer.site
     * @property {Number} type 数据类型
     * @property {Array} cardDatas 数据列表
     * @example <dfer-vertically-list :cardDatas="item.data.value" :type="item.id" />
     */
    export default {
        name: "dfer-vertically-list",
        data() {
            return {};
        },
        props: {
            cardDatas: {
                required: true,
            },
            type: {
                default: 0
            }
        },
        created() {
            // console.log(this.$options.name, this.cardDatas);
        },
        methods: {
            getDetail(item) {
                console.log(this.$options.name, this.type, item);
                switch (this.type) {
                    case this.ktpType.gzz.id:
                        uni.navigateTo({
                            // 工作站首页
                            url: '/pages/index/index_gzz?id=' + item.id
                        })
                        break;
                    default:
                        // 文章详情
                        uni.navigateTo({
                            url: '/pages/index/detail?data=' + encodeURIComponent(JSON.stringify(item))
                        })
                        break;
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 10rpx;
        background: #fff;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 50%;
            padding: 10rpx 5rpx;

            .icon {
                width: 100%;
                height: 220rpx;
                margin-bottom: 14rpx;
            }

            .title {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #303133;
                margin-bottom: 14rpx;
            }

            .sub_title {
                font-size: 22rpx;
                line-height: 33rpx;
                color: #909399;
            }

        }

    }
</style>